<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>应用Vue的实例事件改变数量</title>
    <!--引入Vue库-->
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button onclick="reduce()">on调用</button>
      <button onclick="reduceOnce()">once调用</button>
      <button onclick="off()">off调用</button>
      <div>数量：{{ count }}</div>

      <!-- <textarea v-model="txt1"></textarea> -->
      <textarea id="" cols="30" rows="10">{{txt1}}</textarea>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          count: 1,
          txt1: "",
        },
      });
      // $on 在构造器外部添加事件
      vm.$on("reduce", function () {
        // console.log('执行了reduce()');
        this.txt1 = this.txt1 + "执行了reduce()\n";
        this.count++;
      });
      // 调用
      function reduce() {
        // 事件调用
        // console.log('emit事件调用');
        this.txt1 = this.txt1 + "emit事件调用\n";
        vm.$emit("reduce");
      }
      // $once执行一次的事件
      vm.$once("reduceOnce", function () {
        // console.log('只执行一次的方法');
        this.txt1 = this.txt1 + "只执行一次的方法\n";
        this.count++;
      });
      // 调用
      function reduceOnce() {
        vm.$emit("reduceOnce");
      }
      // 关闭事件
      function off() {
        console.log("关闭事件");
        vm.$off("reduce");
      }
    </script>
  </body>
</html>
